<template>
	<view class="content" v-if="showDome">
		<view class="content_bj" @click="hide"></view>
		<view class="content_box">
			<view class="content_box_top">
				<image mode="aspectFit" :src="userheaderimageurl"></image>
				<view class="name">{{lxr}}</view>
			</view>
			<image class="content_box_qr" mode="widthFix" :src="mpQr"></image>
			<view class="content_box_text">
				扫一扫上面的二维码图案，与我交换名片
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick,
		defineProps
	} from 'vue'
	import {
		getMingpian
	} from '@/utils/utils.js'
	import {
		homeApi
	} from "@/api/index"
	const props = defineProps({
		txlid: {
			type: String,
			default: ''
		},
		userid: {
			type: String,
			default: ''
		},
	})
	const txlid = ref('')
	const userid = ref('')
	
	onMounted(()=>{
		setTimeout(()=>{
			if(props.userid!=''){
				getMingpian(props.userid, props.txlid).then((res) => {
					mpQr.value = res
				})
				getUser()
			}
		},200)
	})
	const showDome = ref(false)
	const hide = ()=>{
		showDome.value = false
	}
	const mpQr = ref('')
	const show = (uid='',txid='')=>{
		showDome.value = true
	}
	const lxr = ref('')
	const userheaderimageurl = ref('')
	const getUser = async()=>{
		let data = {
			do: 'txlcard',
			userid: props.userid,
			txlid: props.txlid
		}
		let res = await homeApi.publicGet(data)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'txlcard') {
				lxr.value = res.columns[i].lxr?res.columns[i].lxr:''
				userheaderimageurl.value = res.columns[i].headerimg?res.columns[i].headerimg:''
			}
		}
	}
	defineExpose({
		hide,show
	})
</script>

<style lang="scss" scoped>
	.content{
		position: fixed;
		height: 100%;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		&_bj{
			width: 100%;
			height: 100%;
			position: absolute;
			background: rgba(0,0,0,.2);
			left: 0;
			top: 0;
		}
		&_box{
			background: #fff;
			width: calc(100% - 160rpx);
			padding: 30rpx;
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
			&_top{
				display: flex;
				align-items: center;
				width: 100%;
				image{
					width: 120rpx;
					height: 120rpx;
					border-radius: 100%;
				}
				.name{
					font-size: 32rpx;
					margin-left:20rpx;
				}
			}
			&_qr{
				width: 90%;
				margin-top: 10rpx;
			}
			&_text{
				width: 100%;
				text-align: center;
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #555;
			}
		}
	}
</style>